import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    StyleSheet
} from 'react-native';

import {
    Press
} from './../../../components';

import * as CONST from './../../../const';

interface Props {
    type:string,
    options: Array<any>,
    onChange: Function,
    value: number | Array<number>,
}

interface State {
    show?: boolean
}

class Select extends PureComponent<Props, State> {
    static defaultProps = {
        value: 0,
        type:``,
        options: [],
        onChange: () => null
    }

    get multiple() {
        const {
            value
        } = this.props;
        return Array.isArray(value);
    }

    private _onPress = ({id}:any) => {
        const {
            type,
            value,
            onChange
        } = this.props;

        if (!this.multiple) {
            return onChange(id,type)
        }

        const _set = (
            new Set([...value])
        )

        if (_set.has(id)) {
            _set.delete(id)
        }
        else {
            _set.add(id)
        }
        onChange([..._set],type)
    }

    render() {
        const {
            value,
            options,
        } = this.props;

        const _selected = (
            new Set([].concat(value as never))
        )

        return (
            <View style={styles.container}>
                {options.map((item:any, i) => {
                    const checked = (
                        _selected.has(
                            item.id as never
                        )
                    )

                    const textStyles = [
                        styles.label
                    ]

                    const itemStyles = [
                        styles.optionStyle
                    ]


                    if(checked) {
                        textStyles.push(
                            styles.labelSelected
                        )
                        itemStyles.push(
                            styles.itemSelected
                        )
                    }

                    return (
                        <Press
                            key={i}
                            value={item}
                            style={itemStyles}
                            onPress={this._onPress}
                        >
                            <Text style={textStyles}>
                                {item.label}
                            </Text>
                        </Press>
                    )
                })}
            </View>
        )
    }
}

export default Select;

const styles = StyleSheet.create({
    container: {
        width:`100%`,
        flexWrap:`wrap`,
        paddingTop: 18,
        marginRight:-14,
        marginBottom:-14,
        flexDirection:`row`
    },
    optionStyle: {
        height: 38,
        borderWidth:.8,
        marginRight:14,
        marginBottom:14,
        borderColor:`#ccc`,
        alignItems:`center`,
        flexDirection:`row`,
        paddingHorizontal:16
    },
    iconStyle:{
        marginRight:8
    },
    label: {
        fontSize: 16,
        color: `#333`
    },
    labelSelected: {
        color: `#fff`
    },
    itemSelected:{
        borderColor:CONST.color,
        backgroundColor:CONST.color
    }
}) as any;